<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input
          v-model="courseInfo.title"
          placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"
        />
      </el-form-item>

      <!-- 课程分类，需要获取所有课程分类的数据 -->
      <!-- 一级分类 -->
      <!--  @change="subjectOneChange" 不要带括号，带普通方法，不带括号，是有默认参数  -->
      <el-form-item label="课程类别">
        <el-select
          v-model="courseInfo.subjectParentId"
          @change="subjectOneChange"
          placeholder="请选择"
        >
          <el-option
            v-for="subject in subjectList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>

        <!-- 二级分类 -->
        <el-select v-model="courseInfo.subjectId" placeholder="请选择">
          <el-option
            v-for="subject in subjectChildList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          />
        </el-select>
      </el-form-item>

      <!-- 需要获取说有的讲师 -->
      <el-form-item label="课程讲师">
        <el-select v-model="courseInfo.teacherId" placeholder="请选择">
          <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="总课时">
        <el-input-number
          :min="0"
          v-model="courseInfo.lessonNum"
          controls-position="right"
          placeholder="请填写课程的总课时数"
        />
      </el-form-item>

      <!-- 课程简介 -->
      <el-form-item label="课程简介">
        <tinymce :height="300" v-model="courseInfo.description" />
      </el-form-item>

      <!-- 课程封面  -->
      <!-- 
        钩子函数：回调函数 不要小括号 如果加了小括号，就没有默认绑定的值
        handleCoverSuccess:上传oss成功之后的回调 默认绑定了两个参数 res(返回值) file(文件对象)
        res(返回值) 包含了下载地址url - http
        handleChange:用户每次修改图片的时候回调 默认绑定参数 file (用于图片回显)
        根据文件生成一个地址，仅仅用于回显 地址blob
       -->
      <el-form-item label="课程封面">
        <el-upload
          :auto-upload="false"
          :show-file-list="false"
          :on-success="handleCoverSuccess"
          :action="BASE_API + '/oss/file/upload?module=cover'"
          class="avatar-uploader"
          :on-change="handleChange"
          ref="upload"
        >
          <!-- 回显的地址放这里ok imageUrl -->
          <img :src="imageUrl" height="200" width="350" />
        </el-upload>
      </el-form-item>

      <el-form-item label="课程价格">
        <el-input-number
          :min="0"
          v-model="courseInfo.price"
          controls-position="right"
          placeholder="免费课程请设置为0元"
        />
        元
      </el-form-item>
    </el-form>
    <div style="text-align: center">
      <el-button type="primary" :disabled="saveBtnDisabled" @click="next"
        >下一步</el-button
      >
    </div>
  </div>
</template>
<script>
import courseApi from "@/api/edu/course";
import teacherApi from "@/api/edu/teacher";
import subjectApi from "@/api/edu/subject";
import Tinymce from "@/components/Tinymce";

// 用于测试，表单提交的默认值
const defaultForm = {
  title: "",
  subjectId: "",
  subjectParentId: "",
  teacherId: "",
  lessonNum: 0,
  description: "一门良好的课程",
  cover: process.env.OSS_PATH + "cover/aliu.jpg", // 课程封面默认地址
  price: 0,
};
export default {
  components: { Tinymce },
  data() {
    return {
      saveBtnDisabled: false,
      courseInfo: defaultForm, // 表单提交对象
      teacherList: [], // 所有讲师数据
      subjectList: [], // 所有课程类别
      subjectChildList: [], // 子类课程集合
      BASE_API: process.env.BASE_API, // 接口API地址 - 上传到阿里云的地址
      imageUrl: defaultForm.cover, // 用于回显的属性，默认值
    };
  },

  created() {
    this.init();
    //this.existChange()
    //this.getCourseInfoFormById(this.$parent.courseId)
  },

  methods: {
    // 初始化方法，用于调用获取所有讲师，获取所有课程类别方法
    init() {
      this.initTeacherList();
      
      //console.log(courseId)
      if (this.$route.params && this.$route.params.id) {
        // 不为空将这个id给父组件form.vue的courseId
        this.$parent.courseId = this.$route.params.id;
      }
      let courseId = this.$parent.courseId;
      if(courseId){
        //alert("打打打")
         this.getCourseInfoFormById(courseId);
      }
      else {
        // 新增
        this.initSubjectList(rep => {
          // 获取所有课程类别
          //console.log(rep)
          this.subjectList = rep;
        });
      }
    },
    // 下一步
    next() {
      // 1.禁用按钮
      this.saveBtnDisabled = true;
      // 2.更新active的值   获取当前对象的父类，给父类属性赋值
      this.$parent.active = 1;
      //this.saveCourseInfo();
      this.existChange(); // 点击下一步的时候判断用户有没有更换过图片
    },
    // 保存基本课程信息
    saveCourseInfo() {
      courseApi.saveCourseInfo(this.courseInfo).then(response => {       
        this.$parent.courseId = response.data.item; 
      });
    },
    // 获取所有讲师
    initTeacherList() {
      //console.log("initTeacherList");
      teacherApi.findAll().then(response => {
        this.teacherList = response.data.items;
      });
    },
    // 获取所有课程类别
    initSubjectList(callback) {
      subjectApi.getNestedTreeList().then(response => {
        // 将所有类别的对象当成参数，callback也是参数
        callback(this.subjectList = response.data.items);
      });
    },
    // 一级课程分类发生变化的回调,id是一级分类每次点击获取的课程分类id
    subjectOneChange(id) {
      // 遍历所有课程
      this.subjectList.forEach((element) => {
        // 如果其中的某一个一级分类id == 我选择的id
        if (element.id === id) {
          // 获取这个分类下的所有的二级分类
          this.subjectChildList = element.child;
        }
      });
      this.courseInfo.subjectId = "";
    },

    // 头像上传成功回调-----------------
    handleCoverSuccess(res, file) {
      // 将图片的下载地址给courseInfo.cover属性，这个属性是要丢给后台的
      this.courseInfo.cover = res.data.url;
      this.checkAddOrUpdate(); // 调用方法，判断是新增还是修改，然后调用相应方法
    },

    // 每一次修改图片都会调用
    handleChange(file) {
      // 每一次点击生成一个回显图片地址，绑定this.imageUrl
      this.imageUrl = URL.createObjectURL(file.raw);
    },

    // 用于判断有没有修改过图片
    existChange() {
      if (this.courseInfo.cover === this.imageUrl) {
        //alert("卧槽")
        this.checkAddOrUpdate()              
      }     
      else {
        //console.log(this.courseInfo.cover)
        
        this.$refs.upload.submit();
        
      }
    },

    // 获取课程数据(回显) - 修改的时候才能用的到
    getCourseInfoFormById(id) {
      
      courseApi.getCourseInfoFormById(id).then(rep => {
        //console.log(rep)
        this.initSubjectList(res => {
          // 获取所有课程类别
          this.subjectList = res;
          // 获取所有二级类别
          this.subjectOneChange(rep.data.item.subjectParentId);
          // 获取subjectId 也就是二级类别选中的id 绑定的这个值
          this.courseInfo = rep.data.item
        });
      });
    },

    checkAddOrUpdate(){
      if(this.$parent.courseId){
        //console.log(this.$parent.courseId)
        //alert("修改")
        this.updateCourseInfo(this.courseInfo)
      }else{
        //alert("保存")
        this.saveCourseInfo()
      }
    },

    updateCourseInfo(courseInfo){
      courseApi.updateCourseInfo(courseInfo).then(response=>{
        this.$message.success("修改成功")
      })
      
    }



  },
};
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>